<template>
  <div class="home">
    <NavBar defaultActive="/" />
    <Content>
      <div slot="bread" class="bread">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>当前也</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div slot="articleDetail">
        <div class="brief">
          <h2 class="title">titel</h2>
          <div class="icons">
            <div><i class="el-icon-date"></i>&nbsp;2020-04-14</div>
            <div><i class="el-icon-folder-opened"></i>&nbsp;分类</div>
            <div class="fire"><i class="el-icon-bicycle"></i>&nbsp;13456人</div>
          </div>
          <div class="introduction">
            你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，你好啊，
          </div>
        </div>
        <div v-html="marked"></div>
      </div>
    </Content>
    <Foot />
  </div>
</template>

<script>
import NavBar from "../../components/common/NavBar";
import Content from "../../components/common/Content.vue";
import Foot from "../../components/common/Footer";
import marked from "marked";
import hljs from "highlight.js";
// import javascript from "highlight.js/lib/languages/javascript";
import "highlight.js/styles/monokai-sublime.css";
export default {
  data() {
    return {
      name: "nuxt.js",
      articles: [1, 2, 3, 4, 5],
      marked: null
    };
  },
  components: {
    NavBar,
    Content,
    Foot
  },
  created() {
    marked.setOptions({
      renderer: new marked.Renderer(),
      highlight: function(code) {
        return hljs.highlightAuto(code).value;
      },
      pedantic: false,
      gfm: true,
      tables: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false
    });
    let handbook = "```javascript\nfunction(){\n\tconsole.log(123)\n}\n```";
    this.marked = marked(handbook);
  },
  asyncData(context) {
    return { name: "小明" };
  }
};
</script>
<style></style>
<style soped>
@import url(https://cdn.bootcdn.net/ajax/libs/github-markdown-css/0.1.0/github-markdown.css);
.home {
  background-color: rgb(246, 246, 246);
  min-height: 100vh;
}
.bread {
  margin: 20px;
}
.brief {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}
.brief > * {
  line-height: 3rem;
}
.brief .title {
  color: #1890ff;
}
.brief .icons {
  display: flex;
  justify-content: center;
}
.introduction {
  color: #cccccc;
  font-size: 0.875rem;
  text-indent: 2rem;
  line-height: 2rem;
}
.brief .icons > * {
  margin: 0 0.625rem;
  font-size: 0.9375rem;
}
.fire {
  color: #1890ff;
}
</style>
